<template>
    <ModalFormTemplate
      ref="modalRef"
      :open="open"
      :formConfig="formConfig"
      :title="title"
      :width="width"
      @cancel="onCancel"
      @finish="onFinish"
    />
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue';
  import ModalFormTemplate from '@/components/template/form/modal-form-template.vue';

  const title ="添加商户进件(微信官方)";//弹窗标题
  const width = 1000;//弹窗宽度
  const modalRef = ref();//通用模态弹窗组件引用，用与调用模态弹窗组件内部方法
  const open = ref(false);//控制弹窗显示、隐藏
  const emits = defineEmits<{ dataReload: []; }>();//通知调用组件(父组件) 执行 父组件 的 @dataReload 的方法
  defineExpose({ show });//暴露接口 show(显示弹窗) 方法，供 父组件 调用

  /* [关闭弹窗] 1. 重置表单 2. 关闭弹窗 */
  function onCancel() {
    modalRef.value.resetForm();
    open.value = false;
  } 

  /* [显示弹窗] 1. 显示弹窗 */
  function show() {
    open.value = true;
  }

  /* [提交弹窗] 1. 调用子组件 提交方法 2. 提交成功后，关闭弹窗 3. 刷新父组件数据 */
  async function onFinish() {
    const params = modalRef.value?.getFormParams();
    const mergedParams = {...addParams,...params};//合并提交参数
    try {
      const ret = await modalRef.value?.postFormData(addAction, mergedParams);
      if (ret === true) {
        onCancel();
        emits('dataReload');
      }
    } catch (error) {}
  }
  const addAction = 'base.merchant.mchexpand.ServiceImpl.save';//save接口 方法名
  const addParams = {mch_expand_id: 0,inquiry_type:1,expand_type:1};//save接口 参数



  /* [表单配置] */
  const formConfig = computed(() => [
    {
      title: '选择商户类型',
      dataIndex: 'subject_type',
      type: 'radio' as const,
      required: true,
      props: {
        options: [
          { label: '个体工商户', value: 1 },
          { label: '企业', value: 2 },
        ]
      },
    },
    // -------- 营业执照 ------------------------------------------
    {
      dataIndex: 'title_business_license',
      title:"营业执照",
      type: 'separator' as const,
    },
    {
      title: '营业执照照片',
      dataIndex: 'license_copy',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '营业执照编号',
      dataIndex: 'license_number',
      type: 'input' as const,
      required: true,
    },
    {
      title: '营业执照全称',
      dataIndex: 'merchant_name',
      type: 'input' as const,
      required: true,
    },
    {
      title: '营业执照注册地址',
      dataIndex: 'license_address',
      type: 'input' as const,
      required: true,
    },
    {
      title: '营业执照有效期开始日期',
      dataIndex: 'license_period_begin',
      type: 'date-picker' as const,
      required: true,
    },
    {
      title: '是否长期有效', 
      dataIndex: 'license_period_validity',
      type: 'switch' as const,
      defaultValue: 2,
      props: {
        checkedChildren: '长期',
        checkedValue: 1,
        unCheckedChildren: '非长期',
        unCheckedValue: 2
      },
    },
    {
      title: '营业执照有效期截止日期',
      dataIndex: 'license_period_end',
      type: 'date-picker' as const,
      required: true,
      hidden(fromData) {
        return fromData.license_period_validity === 1;
      }
    },
    // -------- 法人代表人 ------------------------------------------
    {
      dataIndex: 'title_legal_person',
      title:"法定代表人证件",
      type: 'separator' as const,
    },
    {
      title: '法人身份证人像面照片',
      dataIndex: 'id_doc_copy',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '法人身份证国徽面照片',
      dataIndex: 'id_doc_copy_back',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '法人身份证姓名',
      dataIndex: 'id_doc_name',
      type: 'input' as const,
      required: true,
    },
    {
      title: '法人身份证号',
      dataIndex: 'id_doc_number',
      type: 'input' as const,
      required: true,
    },
    {
      title: '法人身份证居住地址',
      dataIndex: 'id_doc_address',
      type: 'input' as const,
      required: true,
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    {
      title: '法人身份证起始有效期',
      dataIndex: 'id_doc_period_begin',
      type: 'date-picker' as const,
      required: true,
    },
    {
      title: '法人身份证是否长期有效', 
      dataIndex: 'id_doc_period_validity',
      type: 'switch' as const,
      defaultValue: 2,
      props: {
        checkedChildren: '长期',
        checkedValue: 1,
        unCheckedChildren: '非长期',
        unCheckedValue: 2
      },
    },
    {
      title: '法人身份证结束有效期',
      dataIndex: 'id_doc_period_end',
      type: 'date-picker' as const,
      required: true,
      hidden(fromData) {
        return fromData.id_doc_period_validity === 1;
      }
    },
    // -------- 企业受益人 ------------------------------------------
    {
      dataIndex: 'title_beneficiary_info',
      title:"企业受益人信息",
      type: 'separator' as const,
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    {
      title: '受益身份证人像面照片',
      dataIndex: 'ubo_id_doc_copy',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      },
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    {
      title: '受益身份证国徽面照片',
      dataIndex: 'ubo_id_doc_copy_back',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      },
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    {
      title: '受益人身份证姓名',
      dataIndex: 'ubo_id_doc_name',
      type: 'input' as const,
      required: true,
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    {
      title: '受益人身份证号',
      dataIndex: 'ubo_id_doc_number',
      type: 'input' as const,
      required: true,
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
     {
      title: '受益人身份证起始有效期',
      dataIndex: 'ubo_id_doc_period_begin',
      type: 'date-picker' as const,
      required: true,
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    {
      title: '受益人身份证是否长期有效', 
      dataIndex: 'ubo_id_doc_period_validity',
      type: 'switch' as const,
      defaultValue: 2,
      props: {
        checkedChildren: '长期',
        checkedValue: 1,
        unCheckedChildren: '非长期',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    {
      title: '受益人身份证结束有效期',
      dataIndex: 'ubo_id_doc_period_end',
      type: 'date-picker' as const,
      required: true,
      hidden(fromData) {
        return fromData.subject_type !== 2 || fromData.ubo_id_doc_period_validity === 1;
      }
    },
    {
      title: '受益人身份证居住地址',
      dataIndex: 'ubo_id_doc_address',
      type: 'input' as const,
      required: true,
      hidden(fromData) {
        return fromData.subject_type !== 2;
      }
    },
    // -------- 经营信息 ------------------------------------------
    {
      dataIndex: 'title_business_info',
      title:"经营信息",
      type: 'separator' as const,
    },
    {
      title: '商户简称',
      dataIndex: 'merchant_short_name',
      type: 'input' as const,
      required: true,
    },
    {
      title: '客户电话',
      dataIndex: 'service_phone',
      type: 'input-number' as const,
      required: true,
    },
    {
      title: '门店名称',
      dataIndex: 'store_name',
      type: 'input' as const,
      required: true,
    },
    {
      title: '门店地理位置',
      dataIndex: 'store_area_code',
      type: 'cascader' as const,
      props: {
        options: {
          action: "base.manage.area.ServiceImpl.getAreaSelectDTO",
          params: {}
        }
      },
      required: true,
    },
    {
      title: '门店详细地址',
      dataIndex: 'store_address',
      type: 'input' as const,
      required: true,
    },
    {
      title: '门头照',
      dataIndex: 'store_outer_img',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    {
      title: '店内环境照',
      dataIndex: 'store_inner_img',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      }
    },
    // -------- 结算规则 ------------------------------------------
    {
      dataIndex: 'title_settlement_rule',
      title:"结算规则",
      type: 'separator' as const,
    },
    {
      title: '结算规则信息',
      dataIndex: 'settlement_id',
      type: 'select' as const,
      required: true,
      props: {
        options: [
          { label: '通讯业务', value: 1 },
          { label: '加油', value: 2 },
          { label: '民生缴费', value: 3 },
          { label: '游戏、在线音视频虚拟业务', value: 4 }
        ]
      },
    },
    {
      title: '选择行业',
      dataIndex: 'mcc_code',
      type: 'select' as const,
      required: true,
      props: {
        options: [
          { label: '在线图书/游戏/音乐', value: 1 },
          { label: '网络直播/直播平台', value: 2 }
        ]
      },
    },
    {
      title: '特殊资质',
      dataIndex: 'qualification_id',
      type: 'select' as const,
      props: {
        options: [
          { label: '特殊资质1', value: 1 },
          { label: '特殊资质2', value: 2 }
        ]
      },
    },
    {   // 特殊资质这边，要看到时候具体的业务需求，选择表当是否需要填写
      title: '特殊资质',
      dataIndex: 'qualifications',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      },
      hidden(fromData) {
        return fromData.qualification_id == null;
      }
    },
    // -------- 活动信息 ------------------------------------------
    {
      dataIndex: 'title_activities',
      title:"活动信息",
      type: 'separator' as const,
    },
    {
      title: '活动',
      dataIndex: 'activities_id',
      type: 'select' as const,
      required: true,
      props: {
        options: [
          { label: '活动1', value: 1 },
          { label: '活动2', value: 2 }
        ]
      },
    },
    {
      title: '活动费率',
      dataIndex: 'activities_rate',
      type: 'input' as const,
      required: true,
      props:{ suffix:"%",style:"width: 150px" },
    },

    // -------- 结算账户 ------------------------------------------
    {
      dataIndex: 'title_settlement_account',
      title:"结算账户",
      type: 'separator' as const,
    },
    {
      title: '账户类型', 
      dataIndex: 'bank_account_type',
      type: 'switch' as const,
      defaultValue: 2,
      props: {
        checkedChildren: '对私',
        checkedValue: 1,
        unCheckedChildren: '对公',
        unCheckedValue: 2
      },
    },
    {
      title: '开户名称',
      dataIndex: 'account_name',
      type: 'input' as const,
      required: true,
    },
    {
      title: '银行账号',
      dataIndex: 'account_no',
      type: 'input-number' as const,
      required: true,
    },
    {
      title: '开户行',
      dataIndex: 'account_bank',
      type: 'select' as const,
      required: true,
      props: {
        options: [
          { label: '工商银行', value: 1 },
          { label: '交通银行', value: 2 },
          { label: '招商银行', value: 3 },
          { label: '中信银行', value: 4 },
          { label: '浦发银行', value: 5 },
          { label: '建设银行', value: 6 },
          { label: '农业银行', value: 7 },
          { label: '光大银行', value: 8 }
        ]
      },
    },
    {
      title: '支行',
      dataIndex: 'bank_branch_id',
      type: 'select' as const,
      required: true,
      props: {
        options: [
          { label: '至臻银行福州金融街支行', value: 1 },
          { label: '至臻银行厦门集美支行', value: 2 },
          { label: '招商银行xxxx支行', value: 3 },
          { label: '中信银行xxxx支行', value: 4 },
          { label: '浦发银行xxxx支行', value: 5 }
        ]
      },
    },
    {
      title: '开户行分支行所在地区',
      dataIndex: 'bank_address_code',
      type: 'cascader' as const,
      props: {
        options: {
          action: "base.manage.area.ServiceImpl.getAreaSelectDTO",
          params: {}
        }
      },
      required: true,
    },
    // -------- 超级管理员信息 ------------------------------------------
    {
      dataIndex: 'title_contact',
      title:"超级管理员信息",
      type: 'separator' as const,
    },
    {
      title: '超管类型', 
      dataIndex: 'contact_type',
      type: 'radio' as const,
      props: {
        options: [
          { label: '经营者/法人', value: 1 },
          { label: '经办人', value: 2 }
        ]
      }
    },
    {
      title: '超管身份证人像面照片',
      dataIndex: 'contact_id_doc_copy',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      },
      hidden(fromData) {
        return fromData.contact_type !== 2;
      }
    },
    {
      title: '超管身份证国徽面照片',
      dataIndex: 'contact_id_doc_copy_back',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      },
      hidden(fromData) {
        return fromData.contact_type !== 2;
      }
    },
    {
      title: '超管身份证姓名',
      dataIndex: 'contact_name',
      type: 'input' as const,
      required: true,
      hidden(fromData) {
        return fromData.contact_type !== 2;
      }
    },
    {
      title: '超管身份证号',
      dataIndex: 'contact_id_doc_number',
      type: 'input' as const,
      required: true,
      hidden(fromData) {
        return fromData.contact_type !== 2;
      }
    },
    {
      title: '超管身份证起始有效期',
      dataIndex: 'contact_period_begin',
      type: 'date-picker' as const,
      required: true,
      hidden(fromData) {
        return fromData.contact_type !== 2;
      }
    },
    {
      title: '是否长期有效', 
      dataIndex: 'contact_period_validity',
      type: 'switch' as const,
      defaultValue: 2,
      props: {
        checkedChildren: '长期',
        checkedValue: 1,
        unCheckedChildren: '非长期',
        unCheckedValue: 2
      },
      hidden(fromData) {
        return fromData.contact_type !== 2;
      }
    },
    {
      title: '超管身份证结束有效期',
      dataIndex: 'contact_period_end',
      type: 'date-picker' as const,
      required: true,
      hidden(fromData) {
        return fromData.contact_type !== 2 || fromData.contact_period_validity === 1;
      }
    },
    {
      title: '业务办理授权函',
      dataIndex: 'business_authorization_letter',
      type: 'upload' as const,
      required: true,
      props:{
        accept:".png,.jpg,.jpeg",
      },
      hidden(fromData) {
        return fromData.contact_type !== 2;
      }
    },
    {
      title: '手机号',
      dataIndex: 'contact_mobile_phone',
      type: 'input-number' as const,
      required: true,
    },
    {
      title: '邮箱',
      dataIndex: 'contact_mobile_email',
      type: 'input' as const,
      required: true,
    }
  ]);
</script>
<style lang="less" scoped></style>
